import { Card, Space, Button, Select } from "antd";
import { isEqual } from "lodash-es";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import {
  changeModal,
  changeParams,
  getClassifyAsync,
} from "@/store/gameClassify/gameClassifySlice";

export default function Filter() {
  const dispatch = useAppDispatch();

  const { params, table } = useAppSelector((state) => state.gameClassify);
  const {
    config: {
      data: { data: { switch_conf = [], user_channel_list = [] } = {} } = {},
    } = {},
  } = useAppSelector((state) => state.app);

  return (
    <Card>
      <Space
        wrap
        size="large"
        className="w-full flex justify-between"
        classNames={{ item: "last:ml-auto" }}
      >
        <label>
          <span>渠道：</span>
          <Select
            className="min-w-[120px]"
            value={params.channel}
            onChange={(channel) => {
              dispatch(changeParams({ channel }));
            }}
            options={[{ label: "全部", value: "" }, ...user_channel_list]}
          />
        </label>
        <label>
          <span>状态：</span>
          <Select
            className="min-w-[120px]"
            value={params.class_state}
            onChange={(class_state) => {
              dispatch(changeParams({ class_state }));
            }}
            options={[{ label: "全部", value: "" }, ...switch_conf]}
          />
        </label>
        <Button.Group>
          <Button
            type="primary"
            ghost
            onClick={(): void => {
              dispatch(changeModal({ type: "create", open: true }));
            }}
          >
            创建
          </Button>
          <Button
            loading={table.status === "loading"}
            type="primary"
            onClick={(): void => {
              if (isEqual(params, table?.params)) {
                dispatch(getClassifyAsync({...params}));
              } else {
                const newParams = {
                  ...params,
                  page: 1,
                };
                dispatch(changeParams(newParams));
                dispatch(getClassifyAsync(newParams));
              }
            }}
          >
            查询
          </Button>
        </Button.Group>
      </Space>
    </Card>
  );
}
